<template>
	<div class="date-picker-list">
		<div class="date-toolbar date-picker-content">
			<a class="pull-left" @click.native="getYear(-1)">上年</a>
			<a class="pull-left" @click.native="getMonth(-1)">上月</a>
			<div class="current-date-info pull-left">
				<span class="pointer">{{year}}</span>
				<span>年</span>
				<span class="pointer">{{monthName}}</span>
				<span>月</span>
			</div>
			<a class="pull-left" @click.native="getMonth(1)">下月</a>
			<a class="pull-left" @click.native="getYear(1)">下年</a>
		</div>
		<div class="week-list date-picker-content">
			<ul>
				<li v-for="item in weeks">{{item}}</li>
			</ul>
		</div>
		<div class="date-list date-picker-content">
			<table border="0" cellspacing="0" cellpadding="0">
				<tbody>
					<tr v-for="week in days" :class="{hoverd:isWeek}">
						<td v-for="(item,index) in week" >
							<span class="date-picker-days"
							:class="{'today': item.day === tDay && item.year === tYear && item.month === tMonth
							,'active' : item.day === vDay && item.month === vMonth && item.year === vYear
							,'otherM': item.day<=0||item.day>lastDay
							,'weekDay':(index+1)%7 === 6 || index%7 === 6}"
							 @click="select(item)">{{item.name}}</span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="button-toolbar date-picker-content" >
			<div class="pull-right">
				<a class="btn pointer" @click="empty" v-if="!required">清空</a>
				<a class="btn btn-blue pointer" @click="getToday">今天</a>
			</div>
		</div>
	</div>
</template>
<script>

	var debugging=true;
	//选择日期
	export default {
		props:['value','timestamp','required','isWeek'],
		data(){
			var today=new Date();
			return{
				//今天的年月日
				tYear:today.getFullYear(),
				tMonth:today.getMonth(),
				tDay:today.getDate(),
				//星期
				weeks: ['一', '二', '三', '四', '五', '六', '日'],
				//当前选中的日期
				vYear:'',
				vMonth:'',
				vDay:'',
				//显示的日期
				year:'',
				month:'',
				monthName:'',
				days:[],
				lastDay:''
			}
		},
		watch:{
			timestamp(){
				this.init();
			}
		},
		methods:{
			init(){
				debugging&&console.log('===pickerdate activated===')
				//重置
				Object.assign(this,this.$options.data());
				var year=this.tYear,
					month=this.tMonth;
				//读取当前选中的日期

				var val=this.value;
				if(val){
					var date=new Date(val);
					year=this.vYear=date.getFullYear();
					month=this.vMonth=date.getMonth();
					this.vDay=date.getDate();
				}

				//根据当前年月生成日历
				this.year=year;
				this.month=month;
				this.monthName=month+1;
				this.days=getDays(year,month);
				this.lastDay=new Date(year,month+1,0).getDate();

			},

			getYear(num){
				num=+num;
				var year=this.year=+this.year+num,
					month=this.month;
				this.days=getDays(year,month);
				this.lastDay=new Date(year,month+1,0).getDate();
			},
			getMonth(num){
				num=+num;
				var year=this.year,
					month=+this.month+num;
				this.days=getDays(year,month);
				var lastDate=new Date(year,month+1,0);
				this.lastDay=lastDate.getDate();
				//跨年，重新赋值年月
				month=this.month=lastDate.getMonth();
				this.monthName=month+1;
				this.year=lastDate.getFullYear();
			},
			select(item){
				this.$emit('select',new Date(item.year,item.month,item.day))
			},
			empty(){
				this.$emit('select','');
			},
			getToday(){
				this.$emit('select',new Date())
			}
		},

		created(){
			this.init();
		}
	}

	function getDays(year,month){
		/*
		 * 显示6周
		 * 计算前补多少天
		 */
		var firstDay=new Date(year,month,1);
		var  week=firstDay.getDay();
		//星期天
		if(week==0) week=7;
		//补的天数
		var prefill=week-1;
		if(prefill==0) prefill=7;
		//前一天，和最后一天的日期
		var beforeOfFirstDay=new Date(year,month,0).getDate(),
			lastDay=new Date(year,month+1,0).getDate();
		var ret=[]
		for (let i=1;i<=42;i++) {
			var day=i-prefill;
			if(day<=0){
				//上个月
				day+=beforeOfFirstDay;
			}else if(day>lastDay){
				//下个月
				day-=lastDay;
			}
			ret.push({
				name:day,
				month:month,
				year:year,
				day:i-prefill
			});
		}
//		function padding (num) {
//			if(num<10){
//				return "0"+num
//			}
//			return num
//		}
		return ret.chunk(7);
	}
</script>
<style>

</style>

